import React, { FC, useState, useEffect } from 'react'
import Recommend from '@/compents/Recommend'
import Header from '@/compents/header/Header'
import { Affix } from 'antd'
// import { getAllList } from '@/api/article'
// import { useNavigate, useParams } from 'react-router-dom'
// import {
//   HeartOutlined,
//   EyeOutlined,
//   ShareAltOutlined
// } from '@ant-design/icons'
import { getDetail } from '@/api/detail'
import { useParams } from 'react-router-dom'
import style from '../index/compent.module.scss'

const Index: FC = () => {
  const [list, setList]: any = useState([])
  const id = useParams().id
  useEffect(() => {
    void getDetail(id)
      .then(({ data }) => {
        setList(data.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  console.log(list)
  return (
    <div className="w100">
      <div className="content">
        <Header />
        <div className={style.con}>
          <div className={style.left}>
            <div
              className={style.main}
              dangerouslySetInnerHTML={{ __html: list.html }}
            ></div>
          </div>

          <div className={style.right}>
            <Affix offsetTop={20}>
              <Recommend />
            </Affix>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
